<template>
	<view >
		<view class="mask" v-show="showMask" @click="hide"></view>

		<view class="profile-info uni-flex uni-column" style="justify-content: center; text-align: center; align-items: center;">
			<view>
				<image class="avatar" :src="user.imgUrl" ></image>
				<view class="info">
					<text class="name">{{user.nickname}}</text>
					<view style="margin-left: 5px; font-size:30upx;" v-if="user.gender=='F'" class="uni-icon uni-icon-women uni-text-white"></view>
					<view style="margin-left: 5px; font-size:30upx;  color: #b53df3" v-else class="uni-icon uni-icon-man  uni-text-white"></view>
					<text style="margin-left: 5px; font-size:30upx;  color: #b53df3" class=" uni-text-white">{{user.groupId}}</text>
				</view>
				<view> </view>
			</view>
		</view>

		<view class="m-menu">
			<view class="item">
				<text>粉丝</text>
				<text>{{user.fansCountStr}}</text>
			</view>
			<view class="item">

				<text>关注</text>
				<text>{{user.followCountStr}}</text>
			</view>
			<view class="item">

				<text>点赞</text>
				<text>{{user.upvoteCountStr}}</text>
			</view>
			<view class="item">

				<text>访客</text>
				<text>{{user.visitorCountStr}}</text>
			</view>
		</view>

		<view class="section-nav" v-if="gallerys.length > 0">
			<view class="t">相册</view>
			<image class="i" src="../../static/image/address_right.png" background-size="cover" @click="gotoGallery()" />
		</view>

		<!-- <swiper-item v-for="(item, index) of gallerys" :key="index" :data-index="index" v-if="gallerys.length <4">
				<image :src="item" background-size="cover" />
			</swiper-item> -->
		<scroll-view class="gallery" scroll-x v-if="gallerys.length > 0">
			<image v-for="(item,index1) in gallerys" :key="index1" :data-index="index1" :src="item.pictureKey" background-size="cover"></image>
		</scroll-view>


		<view class="section-nav" v-if="mygifts.length > 0">
			<view class="t">礼物</view>
			<image class="i" src="../../static/image/address_right.png" background-size="cover" @click="gotoGift()" />
		</view>
		<scroll-view class="gallery" scroll-x v-if="mygifts.length > 0">
			<image v-for="(item,index4) in mygifts" :key="index4" :data-index="index4" :src="item.pictureKey" background-size="cover"></image>
		</scroll-view>

		<view class="section-nav">
			<view class="t">最新动态</view>
			<image class="i" src="../../static/image/address_right.png" background-size="cover" />
		</view>
		<view v-for="(show, index2)  in shows" :key="index2">
			<view class="uni-card">
				<view class="uni-cart-content" @tap="goDetail(show.showId)">
							
					<view class="content-box" v-if="show.content !== undefined">{{show.content}}</view>
					<view class="uni-uploader__files" v-if="show.showPictures !== undefined">
						<block v-for="(showPicture,index1) in show.showPictures" :key="index1">
							<view class="uni-uploader__file" v-if="index1 < 4">
								<view v-if="index1 == 3" style="margin-top: 80upx; opacity: 0.8; color: #D9D9D9;">更多</view>
							</view>
						</block>
					</view>
				</view>
				<view class="uni-card-footer">
					<view>{{show.createdStamp}}</view>
				</view>

			</view>
		</view>
		<load-more :loadingType="loadingType" :contentText="contentText"></load-more>

		<view class="popup popup-bottom" v-show="showState.giftPopu"  >
			<swiper :indicator-dots="true" :circular="isCircular"  style="background: white;">
				<swiper-item v-for="(subGifts,index5) in gifts" :key="index5" >
					<view class="uni-grid-9" style="background: white;">
						<view  hover-class="uni-grid-9-item-hover" v-for="(item,index6) in subGifts" :key="index6" :class="[index6 % 3 === 2 ? 'no-border-right' : '',item.isActive? 'gift-active':'']"  class="uni-grid-9-item" @tap="selectedGift(item.productId)">
							<image class="uni-grid-9-image" :src="'../../static/image/gift/'+item.productId+'.png'" mode="widthFix"></image>							
							<view class="uni-grid-9-text">{{item.productName}}</view>
							<view class="uni-grid-9-bottom" >粮票:{{item.productPrices[0].price}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="uni-flex uni-row">
				<view class="text" style="width: 200upx;text-align: center;padding: 10upx;">您的食币： {{userInfo.totalWealthValue}}</view>
				<view class="text" style="width: 100upx; text-align: center; padding: 10upx;">
					数量：
				</view>
				<view style="flex: 1;"><number-box :min="0" :max="1000" :value="quantity"></number-box></view>
				<view class="button" style="width: 200upx;text-align: center; center;padding: 10upx;background: #7C4BF9;"  @click="send">赠送</view>
			</view>
		</view>
		<view class="color-floating-button" v-if="isShowButtom == false">
			<view class="uni-card-unlink uni-icon uni-icon-edit" @tap="editPersonal()"></view>
		</view>
		<view class="btn-bottom" v-if="isShowButtom == true">
			<view class="m-menu">
				<view  class="item" v-for="(item,index2) in items" :key="item.key" @click="goTo(index2)">
					<image :src="item.src" background-size="cover" v-if="item.hasSelected == false"></image>
					<image :src="item.selectedSrc" background-size="cover" v-if="item.hasSelected == true" ></image>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		page
	} from '@/api/cms/page';
	import {
		getGallery,
		getPartyInfo,
		addGift,
		getGifts,
		addFollow
	} from '@/api/ucenter/index';
	
	import {
		getPage
	} from '@/api/mall/product'
	import {
		getUrl
	} from '@/common/oss';
	import loadMore from '@/components/load-more.vue'
	import numberBox from '@/components/number-box.vue'

	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		components: {
			loadMore,
			numberBox
		},
		data() {
			return {
				gallerys: [],
				isShowButtom: true,
				user: [],
				shows: [],
				partyId: "",
				mygifts: [],
				allGifts: [],
				gifts: [],
				page: 1,
				pageSize: 4,
				loadingType: 0,
				productId: "",
				itemIndex: 0,
				showMask: false,
				showState: {
					giftPopu: false,
				},
				quantity: 1,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				items: [{
					key: "1",
					navigatePage: "/pages/im/chat",
					src: "../../static/image/my/profile/chat.png",
					isNavigate: true,
					hasSelected: false,
					selectedSrc: "",
					text: "私聊"
				},{
					key: "2",
					navigatePage: "showGift",
					isNavigate: false,
					src: "../../static/image/my/profile/gift.png",
					selectedSrc: "",
					hasSelected: false,
					text: "礼物"
				}, {
					key: "3",
					navigatePage: "addFollow",
					isNavigate: false,
					src: "../../static/image/my/profile/follow.png",
					hasSelected: false,
					selectedSrc: "../../static/image/my/profile/followed.png",
					text: "关注"
				},{
					key: "4",
					navigatePage: "share",
					isNavigate: false,
					hasSelected: false,
					src: "../../static/image/my/profile/share.png",
					selectedSrc: "",
					text: "分享"
				},{
					key: "5",
					navigatePage: "/pages/security/personMore",
					isNavigate: true,
					hasSelected: false,
					src: "../../static/image/my/profile/more.png",
					selectedSrc: "",
					text: "更多"
				}],
			}
		},
		onLoad: function(e) {
			var partyId = e.partyId;
			if(partyId == this.userId) {
				
				this.isShowButtom = false;
			}
			this.partyId = e.partyId;
			console.log(this.isShowButtom)
			this.loadUserInfo(partyId);
			this.loadMyGifts(partyId);
			this.loadShows(partyId);
			this.loadGallery(partyId);
			this.loadGifts();
		},
// 		onReachBottom() {
// 			if (this.loadingType !== 0) {
// 				return;
// 			}
// 			this.loadingType = 1;
// 			this.loadShows();
// 		},
		onUnload() {
			this.page = 1;
			this.shows = [];
			this.partyId = "";
			this.isShowButtom = true;
			this.showMask = false;
			this.showState["giftPopu"] = false;
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
			...mapGetters(
				[ "hasLogin", "userId"]
			),
		},
		methods: {
			hide() {
				this.showMask = false;
				this.showState["giftPopu"] = false;
			},
			selectedGift: function(productId) {
				this.productId = productId;
				for(var i = 0; i< this.gifts.length; i++) {
					for(var j = 0; j< this.gifts[i].length; j++) {
						this.gifts[i][j].isActive = false;
						if(this.gifts[i][j].productId == productId) {
							this.gifts[i][j].isActive = true;
						}
					} 
				}
			},
			send: function() {
				
				var product = this.allGifts.find(p => p.productId == this.productId);
				if(this.userInfo.totalWealthValue < product.productPrices[0].price) {
					uni.showModal({
						title:"提示",
						content:"粮票余额不足，请先充值，谢谢",
						success: async function() {
							uni.navigateTo({
								url: "/pages/my/wallet"
							})
						}
					})
					return;
				}
				addGift({
					giftId: this.productId,
					giftName: product.productName,
					originalImageUrl: product.originalImageUrl,
					fromPartyId: this.userId,
					toPartyId: this.partyId,
				}).then(response => {
						if(response.status == 200 && response.rel == true) {
							this.hideGift();
							uni.showModal({
								title:"提示",
								content:"赠送礼物成功"
							});
						} else {
							uni.showToast({
								title: "赠送礼物失败，请重试，谢谢"
							})
						}
				}).catch(err => {
					uni.showToast({
						title: "赠送礼物失败，请重试，谢谢"
					})
				});
			},
			// 点击登陆
			goDetail: function(e) {
				uni.navigateTo({
					url: '/pages/cms/detail?showId=' + e
				})
			},
			editPersonal() {
				uni.navigateTo({
					url: '/pages/security/user?typeId=1'
				})
			},
			cacl: function(count) {
				if (count === undefined) {
					return "0"
				}
				if (count > 1000) {
					return count / 1000 + "K"
				} else {
					return count + ""
				}
			},
			loadUserInfo: function(partyId) {
				if (this.isShowButtom == false) {
					this.user = this.userInfo;
				} else {
					var that = this;
					getPartyInfo(partyId).then(function(res) {
						if (res.status == 200 && res.data !== undefined) {
							res.data.imgUrl = getUrl(res.data.imgUrl);
							res.data.visitorCountStr = that.cacl(res.data.visitorCount);
							res.data.fansCountStr = that.cacl(res.data.fansCount);
							res.data.followCountStr = that.cacl(res.data.followCount);
							res.data.upvoteCountStr = that.cacl(res.data.upvoteCount);
							if(res.data.fans !== undefined && res.data.fans  == true) {
								that.items[3].hasSelected = true;
							}
							that.user = res.data;
						}

					});
				}

			},
			loadShows: function(partyId) {
				var that = this;
				page(that.getParams({
					partyId: partyId
				}, this.page, this.pageSize, "createdStamp", "desc")).then(function(res) {
					if (res.total > 0 && res.data.length > 0) {
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].baseUrl = getUrl();
						}
						that.shows = that.shows.concat(res.data);
						that.page++;
					}
				})
			},
			getParams: function(p, page, pageSize, orderBy, sort) {
				let params = p || {};
				params.showStatusId = "SHOW_CHECKED";
				params.page = page;
				params.limit = pageSize;
				params.orderBy = orderBy;
				params.sort = sort;
				return params
			},

			loadMyGifts: function(partyId) {
				getGifts(
				{page: 1, limit: 4, createdBy: partyId, orderBy: "createdStamp", sort: "desc"},
				).then(response => {
					if(response.data.length > 0) {
						this.mygifts = response.data;
					}
				});
			},
			loadGifts: function() {
				console.log("loadGifts")
				getPage({productTypeId: "VISUAL_GIFT", page:1, limit: 100}).then(response => {
//					console.log("loadGifts:" + JSON.stringify(response))
					if(response.status == 200 && response.data.length > 0 ) {
						var currData = []; //子数组用来存分割完的数据
						this.allGifts  = response.data;
						//循环需要处理的数组
						
						for(var i = 0; i < response.data.length; i++) {
							//将chartArr[i]添加到子数组
							currData.push(response.data[i]);
							//在这里求9的余数,如果i不等于0,且可以整除 或者考虑到不满9个或等于9个的情况就要加上  i等于当前数组长度-1的时候
							if((i != 0 && (i + 1) % 9 == 0) || i == response.data.length - 1) {
								//把currData加到allData里
								this.gifts.push(currData);
								//在这里清空currData
								currData = [];
							}
						};
						console.log(JSON.stringify(this.gifts))
					}
				});
			},
			loadGallery: function(partyId) {
				var that = this;
				getGallery(partyId).then(function(res) {
					console.log("gallery:" + JSON.stringify(res));
					if (res != null && res.length > 0) {
						for (var i = 0; i < res.length; i++) {
							res[i].pictureKey = getUrl(res[i].pictureKey);
						}
						that.gallerys = res;
					}
				})
			},
			hideGift() {
				this.showMask = false
				this.showState["giftPopu"] = false
			},
			showGift() {
				this.showMask = true
				this.showState["giftPopu"] = true
				console.log("showGift end...")
			},
			goTo(index) {
				var item = this.items[index];
				var that = this;
				if(item.isNavigate == true) {
					uni.navigateTo({
						url: item.navigatePage+"?fromPartyId="+ that.user.partyId+"&fromNickName="+ that.user.nickname
					})
				} else {
					console.log("goTo showGift")
					if(item.navigatePage == "showGift") {
						this.showGift()
					} else if(item.navigatePage == "addFollow") {
						this.addFollows()
					}
				}
			},
			addFollows() {
				addFollow({
					partyIdFrom: this.partyId,
					partyIdTo: this.userInfo.partyId,
					partyRelationshipTypeId: 'ANCHOR_FANS',
					createdBy: this.userInfo.partyId,
				}).then(response => {
					if(response.status == 200 && response.rel == true) {
						uni.showToast({
							title:"关注成功，你称为了她的粉丝，谢谢"
						})
					}
				}).catch(err => {
					uni.showToast({
						 title:"关注失败，请重试"
					})
				})
				
			}
		}
	}
</script>

<style>

	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 750upx;
	}

	.profile-info {
		width: 750upx;
		height: 400upx;
		background: #7C4BF9;
	}

	.icon {
		margin-top: 180upx;
		height: 100upx;
		width: 100upx;
	}


	.profile-info .avatar {
		margin-top: 80upx;
		height: 148upx;
		width: 148upx;
		border-radius: 50%;
	}

	.profile-info .info {
		flex: 1;
		height: 50upx;
	}

	.profile-info .name {
		display: block;
		height: 45upx;
		line-height: 45upx;
		color: #fff;
		font-size: 37.5upx;
		margin-bottom: 10upx;
	}

	.profile-info .level {
		display: block;
		height: 30upx;
		line-height: 30upx;
		margin-bottom: 10upx;
		color: #7f7f7f;
		font-size: 30upx;
	}

	.section-nav {
		width: 750upx;
		height: 108upx;
		background: #fff;
		margin-top: 20upx;
	}

	.section-nav .t {
		float: left;
		width: 600upx;
		height: 108upx;
		line-height: 108upx;
		font-size: 29upx;
		color: #333;
		margin-left: 31.25upx;
	}

	.section-nav .i {
		float: right;
		width: 52upx;
		height: 52upx;
		margin-right: 16upx;
		margin-top: 28upx;
	}

	.gallery {
		width: 750upx;
		height: 185upx;
	}

	.gallery image {
		width: 185upx;
		height: 185upx;
		padding: 10upx;
		background-color: #eee;
	}

	.m-menu {
		display: flex;
		height: 100upx;
		width: 750upx;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.m-menu .item {
		flex: 1;
		display: block;
		padding: 20upx 0;
	}

	.m-menu image {
		display: block;
		width: 58upx;
		height: 58upx;
		margin: 0 auto;
		margin-bottom: 12upx;
	}

	.m-menu text {
		display: block;
		font-size: 24upx;
		text-align: center;
		margin: 0 auto;
		line-height: 1;
		color: #333;
	}
	
	.color-floating-button {
		position: fixed;
		right: 10upx;
		bottom: 50upx;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		background-color: #ed6d53;
		color: #fff;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		opacity: .8;
		cursor: pointer;
	}
	
	.btn-bottom {
		border: 1px solid #E5E5E5;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100upx;
		width: 100%;
		background: #fff;
		display: flex;
	}
	
	/* .content-image {
			vertical-align: middle;
	
		} */
		.gift-active {
			border-color: #871A8E;
			border-top: 2upx solid;
			border-left: 2upx solid;
		}
		.uni-grid-9-text {
			margin-top: 0upx;
			line-height: 20upx;
			height: 20upx;
			text-align: center;
			font-size: 20upx;
		}
		
		.uni-grid-9-bottom {
			line-height: 20upx;
			height: 20upx;
			text-align: center;
			font-size: 5upx;
			color: #BBBBBB;
			padding: 10upx;
		}
	
		.mask {
			position: fixed;
			width: 750px;
			z-index: 998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .3);
		}
	
		.popup {
			position: absolute;
			z-index: 999;
			background-color: #ffffff;
			-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
			box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
		}
	
	
		.popup-bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 780upx;
			text-align: center;
		}
		
		swiper{
			height: 680upx;
			background:#f2f2f2;
		}
	
/* 		.popup-bottom text {
			line-height: 100upx;
			font-size: 32upx;
		} */
		

	
</style>
